<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页</title>    
<link rel="stylesheet" href="<%=request.getContextPath() %>/resource/css/jquery-ui.css" />    
<link rel="stylesheet" href="<%=request.getContextPath() %>/resource/css/common.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/resource/css/jquery.Jcrop.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/resource/css/loading.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/common.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery-1.8.2.js"></script>    
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery-ui.js"></script>     
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/mydatepicker.js"></script>    
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/msgConstants.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/honeycombtool.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/regist_login.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.form.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.Jcrop.js"></script>
</head>
<style type="text/css">
.crop_preview{
			position:absolute;	
			left:500px;
			top:60px;
			width:80px;
			 height:80px; 
			 overflow:hidden;
			 }
.yuantu{margi-left:20px;
		border-right:1px solid #6495ED;
		width: 450px;
		height: 350px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
	var dateInput = $('#userRegistBirthday');
	loadDatepicker(dateInput);
	
});
function filesubmit() {
	loadingWaiting('yuantu','cropbox','0');
    $('#myform').ajaxSubmit({
        dataType:  'json',
        url : '<%=getServletContext().getInitParameter("uploaderURL")%>',
        type: 'POST',
        success:function(res){
			if(res.error == 0) {
				callback(res.url);
			}
			else {
				alert("系统保存文件错误！错误信息：" + res.message);
				loadingWaiting('','','2');
			}
        }
    });

}
function callback(fullImgSrc)
{
	$("#yuantu").html("<img id=cropbox style='max-width:400px ;max-height:300px'>");
	$("#preview_box").html("<img id=crop_preview>");
	document.getElementById('cropbox').src = fullImgSrc;
	document.getElementById('crop_preview').src = fullImgSrc;
	loadingWaiting('yuantu','cropbox','01');
	$("#imgPath").val(fullImgSrc);
	$(function(){
		$('#cropbox').Jcrop({
			onChange:showPreview,
			onSelect:showPreview,
			aspectRatio:1,
			setSelect:[0,0,100,100]
		});
	
		function showPreview(coords){
			if(parseInt(coords.w) > 0){
				//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
				var imgw=$("#crop_preview").width();
				var rx = $("#preview_box").width() / coords.w; 
				var ry = $("#preview_box").height() / coords.h;
				
				//通过比例值控制图片的样式与显示
				$("#crop_preview").css({
					width:Math.round(rx * $("#cropbox").width()) + "px",	//预览图片宽度为计算比例值与原图片宽度的乘积
					height:Math.round(rx * $("#cropbox").height()) + "px",	//预览图片高度为计算比例值与原图片高度的乘积
					marginLeft:"-" + Math.round(rx * coords.x) + "px",
					marginTop:"-" + Math.round(ry * coords.y) + "px"
				});
	
				$('#x').val(coords.x);
				$('#y').val(coords.y);
				$('#w').val(coords.w );
				$('#h').val(coords.h );
			}
		}
	});
}

function UploadZuoBiao(){
	var yuanW=$("#cropbox").width();//图片的宽
	var yuanH=$("#cropbox").height();//图片的高
	var x = $("#x").val();
	var y = $("#y").val();
	var w = $("#w").val();
	var h = $("#h").val();
	var imgPath = $("#imgPath").val();
	$.ajax({
		url: '<%=getServletContext().getInitParameter("saveToLogoURL")%>',
		data:{
			'x':x,
			'y':y,
			'w':w,
			'h':h,
			'yuanW':yuanW,
			'yuanH':yuanH,
			'imgPath':imgPath
			},
		type: 'post',
		async: false,
		dataType: 'json',
		success: function(res) {
				if(res.result == 0){
					$('#headUrl').html("<img src="+res.url+" style='width:80px ;height:80px'>");
					$("#imgPath").val(res.url);
					$('#outer').css("display","none");
				}
				else{
					alert("系统处理异常！错误信息：" + res.message);
					loadingWaiting('','','2');
				}
			}
});
}
function img(){
		document.getElementById("randImage").src = "<%=request.getContextPath() %>/user/checkcode?"+Math.random();
		}


</script>
<%@ include file="top.jsp" %>
<body style="background: url('../resource/images/pages/top-foot/bg.jpg') repeat-x ;">
<div style="margin: 0 auto;width: 900px;height: 46px;line-height: 45px;text-align: left;font-size:18px;background:white;margin-top: 72px;">
		<div style="margin-top:2px;width: 900px;height: 42px;border-bottom:1px solid #E8E8E8;">	
		
		<b>&nbsp;&nbsp;快速注册  </b>
		&nbsp;&nbsp;&nbsp;&nbsp;<font size="2">*号为必填项</font>
		</div>
		
		</div>
		
	<div style="width: 1000px;height: auto;overflow: hidden;margin: 0 auto;background:white">
	
	<form action="<%=request.getContextPath() %>/user/addregist" method="post" onsubmit="return checkRegistInfo()" >
	
		<div style="float: left;margin-left: 65px;width: 600px;height: auto;overflow: hidden;">
			
			<div style="width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
				<div style="float: left;width: 290px;height: 100%;">
					登录邮箱：<input id="userRegistEmail" maxlength="30" name="userRegistEmail" onblur="checkUserRegistEmail()" type="text" style="height:25px;width:200px;">&nbsp;&nbsp;*
				</div>
				<div id="userRegistEmailError" style="float: left;width: 240px;height: 100%;font-size: 13px;">
				</div>
				<div style="clear:both"></div>
			</div>
			<div style="width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
				<div style="float: left;width: 290px;height: 100%;">
					显示昵称：<input id="userRegistNickname" maxlength="10" name="userRegistNickname" onblur="checkUserRegistNickname()" type="text" style="height:25px;width:200px;">&nbsp;&nbsp;*
				</div>
				<div id="userRegistNicknameError" style="float: left;width: 300px;height: 100%;font-size: 13px;">
					
				</div>
				<div style="clear:both"></div>
			</div>
			<div style="width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
				<div style="float: left;width: 290px;height: 100%;">
					登录密码：<input id="userRegistPassword" maxlength="20" name="userRegistPassword" onblur="checkUserRegistPassword()" type="password" style="height:25px;width:200px;">&nbsp;&nbsp;*
				</div>
				<div id="userRegistPasswordError" style="float: left;width: 240px;height: 100%;font-size: 13px;">
					
				</div>
				<div style="clear:both"></div>
			</div>
			<div style="width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
				<div style="float: left;width: 290px;height: 100%;">
					确认密码：<input id="userReRegistPassword" maxlength="20" name="userReRegistPassword" onblur="checkUserReRegistPassword()" type="password" style="height:25px;width:200px;">&nbsp;&nbsp;*
				</div>
				<div id="userReRegistPasswordError" style="float: left;width: 240px;height: 100%;font-size: 13px;">
					
				</div>
				<div style="clear:both"></div>
			</div>
				
			<div style="width:300px;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
				选择性别：<input name="userRegistSex" type="radio" value="MALE" checked="checked">男
						<input name="userRegistSex" type="radio" value="FEMALE">女<span style="margin-left:143px;">*</span>
			</div>
			<div style="width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
			<div style="float: left;width: 290px;height: 100%;">
				您的生日：<input readonly="readonly" id="userRegistBirthday" maxlength="10" style="height:25px;" name="userRegistBirthday" onchange="checkUserRegistBirthday()" value="请点击输入框选择..." type="text" />
				<span style="margin-left:52px;">*</span>
			</div>
			<div id="userReRegistBirthdayError" style="float: left;width: 240px;height: 100%;font-size: 13px;">
					
			</div>
			<div style="clear:both"></div>
		</div>
		<div style="width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
			<div style="float: left;width: 290px;height: 100%;">
				个性签名：<input id="statement" onblur="checkStatement()" name="statement" style="height:25px;" type="text" maxlength="30" />(至多30个字)
			</div>
		</div>
			<div style="width: 400px;height:105px ;text-align: left;margin-left:13px;">
				<div style="height:20px;">头像上传：<a onclick="uploadImage('outer')">点击此处上传</a></div>
				<input type="hidden" id="imgPath" name="imgPath" value="<%=request.getContextPath() + "/" + SystemConstants.SYSTEM_RESOURCE_PATH_USER_DEFAULT_LOGO %>">
				<div style="margin-left:60px;" id="headUrl">
				<img  id="imageHead" src="<%=request.getContextPath() + "/" + SystemConstants.SYSTEM_RESOURCE_PATH_USER_DEFAULT_LOGO %>" width="80px;" height="80px;">
			</div>
			</div>
			<div style="wdith:400px;margin-left:10px;">
				<div style="width:100%;height: 42px;text-align: top;margin-top:5px;">
					<div style="float:left;">&nbsp;&nbsp;验证码：
					<input id="yancheck" maxlength="5" type="text" style="height:25px;width:70px;" onblur="doCheck()">
					</div>
					<div style="float:left;margin-left:3px;">
					<img id="randImage"  name="randImage" width="85px" height="30px" border="1" 
					src="<%=request.getContextPath() %>/user/checkcode">
					<a href="javascript:img();"><font style="font-size:13px;">看不清换一张？</font></a>&nbsp;&nbsp;*
					</div>
					
					<span id="docheck" style="font-size:13px;"></span>
					<div style="clear:both"></div>
				</div>
				<div style="padding-left:55px;float: left;width: 100%;height: 42px;line-height: 42px;text-align: left;margin-left:13px;">
					<input type="submit" class="button_style" value="立即注册">我有账号,<a href="<%=request.getContextPath() %>/user/loginInfo">去登录.</a>
				</div>
				<div style="clear:both"></div>
			</div>
			</div>
			
	</form>
	</div>
	<div id="outer" style="left:40%;top:12%;width:650px;height: 500px;position: absolute;z-index: 100;opacity:0.99;display:none;background:white;border:2px solid gray;">
						<div id="preview" style="margin-left:10px;margin-top:20px;">
						<form action="<%=getServletContext().getInitParameter("uploaderURL")%>"" method="post" id="myform" name="myform" enctype="multipart/form-data" target="douplaod">
						<input type="file" name="file" id="filess" onchange="filesubmit()">
					</form>
					<iframe name="douplaod" style="display:none">
					</iframe>
						<input type="hidden" id="x" name="x" value="0"/>
						<input type="hidden" id="y" name="y" value="0"/>
						<input type="hidden" id="w" name="w" value="100"/>
						<input type="hidden" id="h" name="h" value="100"/>
						
						<br>
						<div id="img_look">
								<div class="yuantu" id="yuantu"></div>
								<span id="preview_box" class="crop_preview"></span>
						</div>
						</div>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" class="button_style" value="确定" onclick="UploadZuoBiao()"/>&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" onclick="ToUserInfoRegist()" class="button_style" value="取消">
					</div>
				
<%@ include file="foot.jsp" %>

</body>
</html>